<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Hello, world!</title>

</head>
<body>
<h1>Hello, world!</h1>

<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous"></script>

<!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->

<!--<div class="alert alert-primary" role="alert">-->
<!--    A simple primary alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-secondary" role="alert">-->
<!--    A simple secondary alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-success" role="alert">-->
<!--    A simple success alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-danger" role="alert">-->
<!--    A simple danger alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-warning" role="alert">-->
<!--    A simple warning alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-info" role="alert">-->
<!--    A simple info alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-light" role="alert">-->
<!--    A simple light alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-dark" role="alert">-->
<!--    A simple dark alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-info" role="alert">-->
<!--    A simple info alert—check it out!-->
<!--</div>-->
<!--<div class="alert alert-primary" role="alert">-->
<!--    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.-->
<!--</div>-->

<!--<button type="button" class="close" data-dismiss="alert" aria-label="Close">-->
<!--    <span aria-hidden="true">&times;</span>-->
<!--</button>-->
<!--<h3>Example heading <span class="badge badge-secondary">New</span></h3>-->
<!--<span class="badge badge-pill badge-danger">Danger</span>-->
<!--<nav aria-label="breadcrumb">-->
<!--    <ol class="breadcrumb">-->
<!--        <li class="breadcrumb-item" ><a href="#">123</a></li>-->
<!--        <li class="breadcrumb-item"><a href="#">Home</a></li>-->
<!--        <li class="breadcrumb-item >Library</li>-->
<!--    </ol>-->
<!--</nav>-->
<!--<div class="btn-group" role="group">-->
<!--    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">-->
<!--        Dropdown-->
<!--    </button>-->
<!--    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">-->
<!--        <a class="dropdown-item" href="#">Dropdown link</a>-->
<!--        <a class="dropdown-item" href="#">Dropdown link</a>-->
<!--    </div>-->
<!--</div>-->
<div class="card-header">
    <ul class="nav nav-pills card-header-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>
</div>
</body>
</html>